<template>
  <div>
    <div>
        <el-row>
            <el-button @click="add">添加菜单</el-button>
        </el-row>
    </div>
    <div>
      <el-table
          class="table"
          :data="tableData"
          style="width: 100%"
          row-key="id"
          border
          :tree-props="{children: 'children'}"
      >
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column prop="url" label="地址" width="180"></el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="icon" label="图标名称"></el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="确定删除嘛？"
            @confirm="handleDelete(scope.$index, scope.row)"
            >
            <el-button slot="reference" size="mini" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      </el-table>
      <!-- 编辑弹窗 -->
      <el-dialog title="编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名称" label-width="120px">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="父菜单" label-width="120px">
            <el-select v-model="form.pid">
              <el-option :key="item.id" v-for="item in menu1Data" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="地址" label-width="120px">
            <el-input v-model="form.url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="排序" label-width="120px">
            <el-select v-model="form.sort">
              <el-option :key="i" v-for="i in 20" :label="i" :value="i"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图标" label-width="120px">
            <el-popover
              placement="bottom"
              width="480"
              trigger="click"
              v-model="popoverVisible"
            >
              <div class="content unicode iconDiv" style="display: block;">
                <ul class="infinite-list icon_lists dib-box" style="overflow:scroll;height:500px">
                  <li :key="item" v-for="item in iconList" class="dib">
                    <i @click="iconSelect(item)" :class="'icon el-icon-'+item"></i>
                  </li>
                </ul>
              </div>
              <el-input slot="reference" v-model="form.icon" autocomplete="off" style="width:150px"></el-input>
            </el-popover>
            <i :class="'showicon icon el-icon-'+form.icon" style="font-size:35px"></i>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitData">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FrontMenu',
  data() {
    return {
      tableData: [],
      menu1Data: [], // 1级菜单数据
      dialogFormVisible: false,
      popoverVisible: false,
      index: null, // 当前编辑行索引
      submitType: null, // 提交类型 添加/更新
      form: {
        id: '',
        name: '',
        pid: '',
        sort: '',
        url: '',
        icon: '',
      },
      iconList: ["platform-eleme","eleme","delete-solid","delete","s-tools","setting","user-solid","user","phone","phone-outline","more","more-outline","star-on","star-off","s-goods","goods","warning","warning-outline","question","info","remove","circle-plus","success","error","zoom-in","zoom-out","remove-outline","circle-plus-outline","circle-check","circle-close","s-help","help","minus","plus","check","close","picture","picture-outline","picture-outline-round","upload","upload2","download","camera-solid","camera","video-camera-solid","video-camera","message-solid","bell","s-cooperation","s-order","s-platform","s-fold","s-unfold","s-operation","s-promotion","s-home","s-release","s-ticket","s-management","s-open","s-shop","s-marketing","s-flag","s-comment","s-finance","s-claim","s-custom","s-opportunity","s-data","s-check","s-grid","menu","share","d-caret","caret-left","caret-right","caret-bottom","caret-top","bottom-left","bottom-right","back","right","bottom","top","top-left","top-right","arrow-left","arrow-right","arrow-down","arrow-up","d-arrow-left","d-arrow-right","video-pause","video-play","refresh","refresh-right","refresh-left","finished","sort","sort-up","sort-down","rank","loading","view","c-scale-to-original","date","edit","edit-outline","folder","folder-opened","folder-add","folder-remove","folder-delete","folder-checked","tickets","document-remove","document-delete","document-copy","document-checked","document","document-add","printer","paperclip","takeaway-box","search","monitor","attract","mobile","scissors","umbrella","headset","brush","mouse","coordinate","magic-stick","reading","data-line","data-board","pie-chart","data-analysis","collection-tag","film","suitcase","suitcase-1","receiving","collection","files","notebook-1","notebook-2","toilet-paper","office-building","school","table-lamp","house","no-smoking","smoking","shopping-cart-full","shopping-cart-1","shopping-cart-2","shopping-bag-1","shopping-bag-2","sold-out","sell","present","box","bank-card","money","coin","wallet","discount","price-tag","news","guide","male","female","thumb","cpu","link","connection","open","turn-off","set-up","chat-round","chat-line-round","chat-square","chat-dot-round","chat-dot-square","chat-line-square","message","postcard","position","turn-off-microphone","microphone","close-notification","bangzhu","time","odometer","crop","aim","switch-button","full-screen","copy-document","mic","stopwatch","medal-1","medal","trophy","trophy-1","first-aid-kit","discover","place","location","location-outline","location-information","add-location","delete-location","map-location","alarm-clock","timer","watch-1","watch","lock","unlock","key","service","mobile-phone","bicycle","truck","ship","basketball","football","soccer","baseball","wind-power","light-rain","lightning","heavy-rain","sunrise","sunrise-1","sunset","sunny","cloudy","partly-cloudy","cloudy-and-sunny","moon","moon-night","dish","dish-1","food","chicken","fork-spoon","knife-fork","burger","tableware","sugar","dessert","ice-cream","hot-water","water-cup","coffee-cup","cold-drink","goblet","goblet-full","goblet-square","goblet-square-full","refrigerator","grape","watermelon","cherry","apple","pear","orange","coffee","ice-tea","ice-drink","milk-tea","potato-strips","lollipop","ice-cream-square","ice-cream-round"],
    }
  }
  ,created() {
    // 请求数据
    this.getData();
    this.getMenu1();
  }
  ,methods: {
    add(){
      this.dialogFormVisible = true;
      Object.assign(this.form, {
        id: '',
        name: '',
        pid: 0,
        sort: 20,
        url: '',
        icon: '',
      } );
      this.submitType = "添加";
    },
    // 编辑按钮
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.index = index;
      Object.assign(this.form, row );
      this.submitType = "编辑";
    },
    // 获取数据
    async getData(){
      let res = await this.$http.get("/front/menu/node");
      if(res.code === 1){
        this.tableData = res.data;
      }
    },
    // 获取1级菜单数据
    async getMenu1(){
      let res = await this.$http.get("/front/menu/list/1");
      if(res.code === 1){
        let menuData = res.data;
        menuData.push({id:0,name:'无'});
        this.menu1Data = menuData;
      }
    },
    // 更新数据
    async submitData(){
      let params = {
        ...this.form
      };
      let res;
      if(this.submitType == "添加"){
        res = await this.$http.post("/front/menu/add", params);
      }
      else{
        res = await this.$http.put("/front/menu/update", params);
      }
      if(res.code === 1){
        this.$message({
          message: '提交成功！',
          type: 'success'
        });
        this.dialogFormVisible = false;
        // 更新列表数据
        this.getData();
      }
      else{
        this.$message.error('提交失败：' + res.message);
      }
    },
    // 删除
    async handleDelete(index, row) {
      let res = await this.$http.del("/front/menu/del?menuId="+row.id);
      if(res.code === 1){
        this.$message({
          message: '删除成功！',
          type: 'success'
        });
        this.dialogFormVisible = false;
        // 更新列表数据
        this.getData();
      }
      else{
        this.$message.error('删除失败：' + res.data);
      }
    },
    // 选择图标
    iconSelect(icon) {
      this.form.icon = icon;
      this.popoverVisible = false;
    },
    sizeChange(e) {
      this.page.size = e;
      this.getData();
    },
    search(){
      this.getData();
    },
    exportExcel(){
      this.downloadFile();
    }

  }
}
</script>
<style scoped>
.dib {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
.dib-box .dib {
  vertical-align: top;
  font-size: 12px;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: inherit;
}

.icon_lists {
  width: 100% !important;
  overflow: hidden;
  *zoom: 1;
}
.showicon{
  font-size: 50px;
  line-height: 31px;
  color: white;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0px 16px 0px 20px;
}
.icon_lists li {
  width: 50px;
  margin-bottom: 2px;
  margin-right: 2px;
  text-align: center;
  list-style: none !important;
  cursor: default;
}
.icon_lists li .code-name {
  line-height: 1.2;
}
.icon_lists .icon {
  display: block;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
  margin: 10px auto;
  color: white;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
}

.icon_lists .icon:hover{
  font-size: 45px;
}
</style>
